<template>
  <div class="j-comment">
    <!-- <div id="v-emoji-picker" @click.stop="() => {}"> -->
    <!-- <VEmojiPicker v-show="showVEmojiPicker" @select="selectEmoji" /> -->
    <!-- </div> -->
    <!-- <textarea
      v-if="withCommentContent"
      v-model="commentText"
      id="j-comment-content"
      placeholder="请输入评论"
      class="j-comment-content"
      @input="commentInput"
    ></textarea> -->

    <div class="parent">
      <div class="user-avatar" v-if="avatarVisiable">
        <img src="@/assets/images/headericon.jpg" alt="" />
      </div>
      <div class="child">
        <div class="input-box-container">
          <!-- 文本编辑器 -->
          <RichTextInput
            id="j-comment-content"
            ref="RichTextInputRef"
            :Boolean="richtextbean"
            :modelValue="commentText"
            @updata:modelValue="receiveRichText"
          >
          </RichTextInput>
          <div class="input-action-part">
            <div class="acition-emoji">
              <span class="emoji-trigger" ref="emojiTriggerRef" @click="handleEmojiVisiable">
                <i class="iconfont icon-biaoqing"></i>
                表情
              </span>
              <span class="emoji-trigger">
                <input type="file" id="imgbox" />
                <label for="imgbox" class="uploadimg-box"><i class="iconfont icon-tupian-xianxing"></i>图片</label>
              </span>
            </div>
            <div class="acition-btn">
              <span class="content-toggle">Ctrl + Enter</span>
              <div>
                <el-button class="content-post-btn" :disabled="publishBtnVisiable" :class="{ active: activedBtn }" @click="submitComment"
                  >发布评论</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="emoji-container" v-if="isEmojiShow">
          <!-- 表情面板 -->
          <EmojiPanel @emojiClick="onEmojiClick"></EmojiPanel>
        </div>
      </div>
    </div>
    <!--  <div v-if="withCommentContent" class="j-comment-content-btns">
      <img @click.stop="showEmoji" id="comment-emoji" style="width: 20px; height: 20px; cursor: pointer" src="@/assets/images/headericon.jpg" />
      <button @click="submitComment()">发表</button>
    </div> -->

    <!-- 标题：热门评论 -->
    <div class="j-comment-title" v-if="showComentDatas.length > 0">{{ title }}</div>
    <div class="no-comment" v-else>暂时还没有评论,赶紧来评论吧~</div>
    <!-- 评论列表 -->
    <div class="j-comment-item" v-for="(item, index) in showComentDatas" :key="'comment' + index">
      <div class="j-comment-header">
        <div class="j-comment-header-pre">
          <img class="j-comment-header-img" :src="item.avatar" />
          <span class="j-comment-header-nickname"
            >{{ item.nickname }}<span v-if="item[keyMap.isAdmin] === props.isAdminId" style="color: skyblue"> (作者)</span></span
          >
        </div>
        <div class="j-comment-header-time">{{ item.create_time }}</div>
      </div>
      <div class="j-comment-body" v-html="item.content"></div>
      <div class="j-comment-footer">
        <div>
          <span class="upitem" style="margin-right: 20px"> <i class="j-comment-icon iconfont icon-icon"> </i><span>点赞</span> </span>
          <i class="j-comment-icon iconfont icon-pinglun" @click="replyClick(item, index)">
            <span class="upitem" v-if="!item.showReply">评论</span>
          </i>
        </div>
        <span class="cancel-comment" @click="replyClick(item, index)">{{
          item.showReply ? '取消回复' : (item.children && item.children.length) || ''
        }}</span>
      </div>
      <!-- <div
                v-if="item.showReply"
                contenteditable="true"
                tabindex="0"
                class="j-comment-reply-content focused"
                :placeholder="replyText == '' ? '回复' + item.nickname : ''"
                v-text="replyText"
                :id="'reply-' + index"
                @blur="replyBlur(item, index)"
                @input="replyInput"
            ></div> -->
      <!-- <textarea
        v-if="item.showReply"
        v-model="replyText"
        :id="'reply-' + index"
        :placeholder="replyText == '' ? '回复' + item.nickname : ''"
        class="j-comment-reply-content focused"
        @input="replyInput"
      ></textarea> -->

      <!-- 回复框 -->
      <div class="parent" v-if="item.showReply">
        <div class="user-avatar" v-if="avatarVisiable">
          <img src="@/assets/images/headericon.jpg" alt="" />
        </div>
        <div class="child">
          <div class="input-box-container">
            <!-- 文本编辑器 -->
            <RichTextInput
              class="j-comment-reply-content focused"
              :id="'reply-' + index"
              ref="subRichTextInputRef"
              :modelValue="replyText"
              @updata:modelValue="receiveRichText"
              :hitContent="replyText == '' ? '回复' + item.nickname : ''"
            >
            </RichTextInput>
            <div class="input-action-part">
              <div class="acition-emoji">
                <span class="emoji-trigger" ref="emojiTriggerRef" @click="handleShowEmoji(index)">
                  <i class="iconfont icon-biaoqing"></i>
                  表情
                </span>
                <span class="emoji-trigger">
                  <input type="file" id="imgbox" />
                  <label for="imgbox" class="uploadimg-box"><i class="iconfont icon-tupian-xianxing"></i>图片</label>
                </span>
              </div>
              <div class="acition-btn">
                <span class="content-toggle">Ctrl + Enter</span>
                <div>
                  <el-button class="content-post-btn" :class="{ active: activedBtn }" @click="submitReply(item.id)">发布</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="emoji-container" v-if="item.showEmojiValue">
            <!-- 表情面板 -->
            <EmojiPanel @emojiClick="onEmojiClick"></EmojiPanel>
          </div>
        </div>
      </div>
      <!-- <RichTextInput
        v-if="item.showReply"
        :id="'reply-' + index"
        :placeholder="replyText == '' ? '回复' + item.nickname : ''"
        class="j-comment-reply-content focused"
        @input="replyInput"
      /> -->

      <!-- 没用的发表按钮 -->
      <div v-if="item.showReply" class="j-comment-reply-btns" style="display: none">
        <img
          class="emoji-btn"
          @click.stop="showEmoji"
          :id="'emoji-reply-' + index"
          style="width: 20px; height: 20px; cursor: pointer"
          src="@/assets/images/headericon.jpg"
        />
        <button @click="submitReply(item.id)">发表</button>
      </div>

      <!-- 评论回复  -->
      <div class="j-comment-childer" v-if="item.children && item.children.length > 0">
        <div class="j-comment-item" v-for="(children, childrenIndex) in item.showChildren" :key="'children' + childrenIndex">
          <div class="j-comment-header">
            <div class="j-comment-header-pre">
              <img class="j-comment-header-img" :src="children.avatar" />
              <span class="j-comment-header-nickname">
                {{ children.nickname }}
                <span v-if="children[keyMap.isAdmin] === props.isAdminId" style="color: skyblue">(作者)</span>
              </span>
            </div>
            <div class="j-comment-header-reply-nickname" v-if="item.nickname"><span>回复</span>{{ item.nickname }}</div>
            <div class="j-comment-header-time">
              {{ children.create_time }}
            </div>
          </div>
          <div class="j-comment-body" v-html="children.content"></div>
          <div class="j-comment-footer">
            <div>
              <span style="margin-right: 20px"><i class="j-comment-icon iconfont icon-icon"></i><span class="upitem"> 点赞</span></span>
              <i class="j-comment-icon iconfont icon-pinglun" @click="replyClick(item, index, children, childrenIndex, true)">
                <span class="upitem">评论</span>
              </i>
            </div>
            <span @click="replyClick(item, index, children, childrenIndex, true)">
              {{ children.showReply ? '取消回复' : (children.children && children.children.length) || '' }}
            </span>
          </div>
          <!-- <div
                        v-if="children.showReply"
                        contenteditable="true"
                        tabindex="0"
                        class="j-comment-reply-content focused"
                        :placeholder="
                            replyText == '' ? '回复' + children.nickname : ''
                        "
                        :text="replyText"
                        :id="'reply-' + index + '-' + childrenIndex"
                        @blur="replyBlur(item, index, children, true)"
                    ></div> -->
          <!--  <textarea
            v-if="children.showReply"
            v-model="replyText"
            :id="'reply-' + index + '-' + childrenIndex"
            :placeholder="replyText == '' ? '回复' + children.nickname : ''"
            class="j-comment-reply-content focused"
            @input="replyInput"
          ></textarea> -->

          <div class="parent focused" v-if="children.showReply" :id="'reply-' + index + '-' + childrenIndex">
            <div class="user-avatar" v-if="avatarVisiable">
              <img src="@/assets/images/headericon.jpg" alt="" />
            </div>
            <div class="child">
              <div class="input-box-container">
                <!-- 文本编辑器 -->
                <RichTextInput
                  ref="subRichTextInputRef"
                  :modelValue="replyText"
                  @updata:modelValue="receiveRichText"
                  :hitContent="replyText == '' ? '回复' + children.nickname : ''"
                >
                </RichTextInput>
                <div class="input-action-part">
                  <div class="acition-emoji">
                    <span
                      class="emoji-trigger"
                      ref="emojiTriggerRef"
                      @click="handleShowEmoji(index)"
                      :id="'emoji-reply-' + index + '-' + childrenIndex"
                    >
                      <i class="iconfont icon-biaoqing"></i>
                      表情
                    </span>
                    <span class="emoji-trigger">
                      <input type="file" id="imgbox" />
                      <label for="imgbox" class="uploadimg-box"><i class="iconfont icon-tupian-xianxing"></i>图片</label>
                    </span>
                  </div>
                  <div class="acition-btn">
                    <span class="content-toggle">Ctrl + Enter</span>
                    <el-button class="content-post-btn" :class="{ active: activedBtn }" @click="submitReply(children[keyMap.id || 'id'])"
                      >发布</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="emoji-container" v-show="item.showEmojiValue">
                <!-- 表情面板 -->
                <EmojiPanel @emojiClick="onEmojiClick"></EmojiPanel>
              </div>
            </div>
          </div>
          <div v-if="children.showReply" class="j-comment-reply-btns" style="display: none">
            <img
              class="emoji-btn"
              @click.stop="showEmoji"
              :id="'emoji-reply-' + index + '-' + childrenIndex"
              style="width: 20px; height: 20px; cursor: pointer"
              src="@/assets/images/headericon.jpg"
            />
            <button @click="submitReply(children[keyMap.id || 'id'])">发表</button>
          </div>

          <div class="j-comment-childer" v-if="children.pContent">
            <div class="j-coment-children-content" :title="entitiestoUtf16(children.pContent)" v-html="children.pContent"></div>
          </div>
        </div>
        <div
          v-if="item.showChildren.length < item.children.length"
          :key="'more' + index"
          class="j-comment-childer-more"
          @click="showMore(item, index)"
        >
          查看更多回复
        </div>
        <div v-else-if="item.showChildren.length > showNumber" :key="'mo' + index" class="j-comment-childer-more" @click="showMore(item, index)">
          收起回复∧
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommentAvatar from '@/components/library/CommentAvatar.vue'
import { ref, watch, nextTick, onMounted } from 'vue'
import { addCommentApi } from '@/api/article'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const { state } = useStore()
const route = useRoute()
const props = defineProps({
  isAdminId: {
    type: Number,
    default: 0
  },
  avatarVisiable: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '热门评论'
  },
  orderBy: {
    type: String,
    default: 'time'
  },
  rank: {
    type: String,
    default: 'desc'
  },
  showNumber: {
    type: Number,
    default: 2
  },
  withCommentContent: {
    type: Boolean,
    default: true
  },
  keyMap: {
    type: Object,
    default: () => {
      return {
        pid: 'pid',
        id: 'id',
        isAdmin: 'isAdmin'
      }
    }
  },
  commentDatas: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const showComentDatas = ref([])
const replyText = ref('')
const commentText = ref('')
const lastLength = ref(0)
const showItem = ref([])
const showVEmojiPicker = ref(false)
const emojiTextId = ref('')
//表情转码(暂时不用)
const utf16toEntities = (str) => {
  const patt = /[\ud800-\udbff][\udc00-\udfff]/g // 检测utf16字符正则
  str = str.replace(patt, (char) => {
    let H
    let L
    let code
    let s
    if (char.length === 2) {
      H = char.charCodeAt(0) // 取出高位
      L = char.charCodeAt(1) // 取出低位
      code = (H - 0xd800) * 0x400 + 0x10000 + L - 0xdc00 // 转换算法
      s = `&#${code};`
    } else {
      s = char
    }
    return s
  })
  return str
}
// 表情解码（暂时不用）
const entitiestoUtf16 = (strObj) => {
  const patt = /&#\d+;/g
  const arr = strObj.match(patt) || []
  let H
  let L
  let code
  for (let i = 0; i < arr.length; i += 1) {
    code = arr[i]
    code = code.replace('&#', '').replace(';', '')
    // 高位
    H = Math.floor((code - 0x10000) / 0x400) + 0xd800
    // 低位
    L = ((code - 0x10000) % 0x400) + 0xdc00
    code = `&#${code};`
    const s = String.fromCharCode(H, L)
    strObj = strObj.replace(code, s)
  }
  return strObj
}
/* 展示表情(暂时不用) */
const showEmoji = (el) => {
  let v = document.getElementById('v-emoji-picker')
  v.style.left = el.pageX + 5 + 'px'
  v.style.top = el.pageY + 5 + 'px'
  showVEmojiPicker.value = !showVEmojiPicker.value
  emojiTextId.value = el.target.id
}
/* 选择表情 暂时不用 */
const selectEmoji = (emoji) => {
  /*  // 选择emoji后调用的函数 */
  let input = null
  if (emojiTextId.value === 'comment-emoji') {
    input = document.getElementById('j-comment-content')
  } else {
    let id = emojiTextId.value.split('emoji-')
    input = document.getElementById(id[1])
  }
  let startPos = input.selectionStart
  let endPos = input.selectionEnd
  let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
  input.value = resultText
  input.focus()
  input.selectionStart = startPos + emoji.data.length
  input.selectionEnd = startPos + emoji.data.length
  if (emojiTextId.value === 'comment-emoji') commentText.value = resultText
  else {
    replyText.value = resultText
  }
}

const emits = defineEmits(['submitComment'])

/* 提交回复 */
const submitReply = (id) => {
  const params = {
    // article_id: showComentDatas.value[0].article_id,
    father_id: id,
    comment_info: inputContent.value
  }

  emits('submitComment', params)
}
/* 提交发布评论 */
const submitComment = (id = null) => {
  const params = {
    // article_id: showComentDatas.value[0].article_id,
    comment_info: inputContent.value
  }
  // inputContent.value = ''
  emits('submitComment', params)
}
/* 展开更多 */
const showMore = (item, index) => {
  showItem.value[index] = !showItem.value[index]
  if (item.showChildren.length < item.children.length) {
    item.showChildren = item.children
  } else {
    item.showChildren = item.children.slice(0, props.showNumber)
  }
}

/* 点击回复 */
const replyClick = (item, index, children = {}, childrenIndex = 0, isChildren = false) => {
  const flag = isChildren ? !children.showReply : !item.showReply
  showVEmojiPicker.value = false
  hideAll()
  let ref = 'reply-' + index
  if (isChildren) {
    children.showReply = flag
    if (children.showReply) ref = 'reply-' + index + '-' + childrenIndex
  } else {
    item.showReply = flag
  }
  if (children.showReply || item.showReply) {
    nextTick(() => {
      document.getElementById(ref).focus()
    })
  } else {
    replyText.value = ''
  }
}
/* 隐藏所有 */
const hideAll = () => {
  replyText.value = ''
  showComentDatas.value.map((item) => {
    item.showReply = false
    item.showChildren &&
      item.showChildren.map((item1) => {
        item1.showReply = false
      })
  })
  showComentDatas.value = [...showComentDatas.value]
}
/* 评论输入(暂时不用) */
const commentInput = (item) => {
  const currentLength = item.target.value.length
  /* // 判断字数如果比之前少了，说明内容正在减少，需要清除高度样式，重新获取 */
  if (currentLength < lastLength.value) {
    item.target.style.height = ''
  }
  const currentHeight = item.target.scrollHeight
  // 如果内容高度发生了变化，再去设置高度值
  if (currentHeight > item.target.offsetHeight) {
    item.target.style.height = currentHeight + 'px'
  }
  lastLength.value = currentLength
}
/* 暂时不用 */
const replyInput = (item) => {
  const currentLength = item.target.value.length
  // 判断字数如果比之前少了，说明内容正在减少，需要清除高度样式，重新获取
  if (currentLength < lastLength.value) {
    item.target.style.height = ''
  }
  const currentHeight = item.target.scrollHeight
  // 如果内容高度发生了变化，再去设置高度值
  if (currentHeight > item.target.offsetHeight) {
    item.target.style.height = currentHeight + 'px'
  }
  lastLength.value = currentLength
}

const rankDatas = (datas) => {
  if (props.rank === 'desc') {
    return datas.sort((b, a) => {
      return new Date(a[props.orderBy]).getTime() - new Date(b[props.orderBy]).getTime()
    })
  }
  return datas.sort((a, b) => {
    return new Date(a[props.orderBy]).getTime() - new Date(b[props.orderBy]).getTime()
  })
}

watch(
  () => props.commentDatas,
  (newVal, oldVal) => {
    initData()
  }
)

const treeToArr = (data, pName = null, pContent = '') => {
  let cloneData = JSON.parse(JSON.stringify(data))
  let res = []
  cloneData.map((item) => {
    if (item.children) {
      res.unshift(...treeToArr(item.children, item.nickname, item.content))
    }
    item['reply'] = pName
    item['pContent'] = pContent
    res.unshift(item)
  })
  if (showItem.value.length === 0) {
    showItem.value = new Array(res.length).fill(false)
  }
  return res
}
const getTreeData = (data, id = 'id', pid = 'pid') => {
  let cloneData = JSON.parse(JSON.stringify(data))
  return cloneData.filter((parent) => {
    let branchArr = cloneData.filter((child) => parent[id] == child[pid])
    for (let i = 0; i < branchArr.length; i++) {
      branchArr.parent_nickname = parent.nickname
    }
    branchArr.length > 0 ? (parent['children'] = branchArr) : ''
    return parent[pid] === 0
  })
}
/**
 * @Method 使用递归的方式处理偏平化数据
 * @param {*} list 为需要处理的数组
 * @param {*} pid  为传入的顶级id
 */
const transTreeData = (list, pid) => {
  const treeData2 = []
  list.forEach((item) => {
    // 判断每一项的 ParentId 是否等于传入的顶级 pid 一致
    if (item.parent_comment_id === pid) {
      /*  //tag: 如果有一致的数据，在将当前这一项的 id 作为顶级id对象传入   transTreeData */
      //    查看自己本身是否依然有子级分类，以此递归
      const children = transTreeData(list, item.id)
      // 判断返回的 children 进行判断
      // 如果返回空数组，说明没有子级分类，不做任何处理
      if (children.length) {
        item.child = children
      }
      /* 最终直接将当前数据 push 到treeData2即可 */
      treeData2.push(item)
    }
  })
  return treeData2
}

const initData = () => {
  showComentDatas.value = props.commentDatas
  console.log(showComentDatas.value, '使用递归处理过的数据')

  // showComentDatas.value = transTreeData(props.commentDatas, 5970)
  // showComentDatas.value = getTreeData(props.commentDatas, props.keyMap.id, props.keyMap.pid)
  // showComentDatas.value = rankDatas(showComentDatas.value)
  // console.log(showComentDatas.value, '排序后的数据')
  for (let i = 0; i < showComentDatas.value.length; i++) {
    if (showComentDatas.value[i].children) {
      showComentDatas.value[i].children = treeToArr(showComentDatas.value[i].children)
      showComentDatas.value[i].children = rankDatas(showComentDatas.value[i].children)
      showComentDatas.value[i].showChildren = showComentDatas.value[i].children.slice(
        0,
        showItem.value[i] ? showComentDatas.value[i].children.length : props.showNumber
      )
    }
  }
}
initData()

/* 发布评论框 */

const inputContent = ref('')
const activedBtn = ref(false)
const isEmojiShow = ref(false)
const publishBtnVisiable = ref(false)
/* 表情按钮 控制显示隐藏*/
const richtextbean = ref(false)

const handleEmojiVisiable = () => {
  richtextbean.value = true
  isEmojiShow.value = !isEmojiShow.value
}
/* 控制richtextbean */
const handleShowEmoji = (index) => {
  richtextbean.value = false
  console.log(richtextbean.value)
  console.log(showComentDatas.value[index])
  if (showComentDatas.value[index]) {
    showComentDatas.value[index].showEmojiValue = !showComentDatas.value[index].showEmojiValue
  }
}
/* 接收子组件编辑器传来的值 */
const receiveRichText = (value) => {
  inputContent.value = value
}
watch(
  () => inputContent.value,
  (newValue, oldValue) => {
    inputContent.value = newValue
  },
  { immediate: true },
  { deep: true }
)
/* 监听：当点击表情按钮的时候input-box不失去焦点 */
const emojiTriggerRef = ref(null)
const RichTextInputRef = ref(null)
onMounted(() => {
  if (emojiTriggerRef.value) {
    let ref = ''
    emojiTriggerRef.value.addEventListener('click', (event) => {
      document.querySelector('.input-box').focus()

      // document.querySelector('.richtext').focus()
    })
  }
  if (RichTextInputRef.value.inputBoxRef) {
    /*  监听编辑器有无值 */
    RichTextInputRef.value.inputBoxRef.addEventListener('input', (event) => {
      if (event.target.innerText.length > 0 || event.target.innerHTML.length > 0) {
        publishBtnVisiable.value = false
        activedBtn.value = true
      } else {
        publishBtnVisiable.value = true
        activedBtn.value = false
      }
    })
  }
  document.addEventListener('mouseup', (event) => {
    let emojiContainer = document.querySelector('.parent')
    if (emojiContainer && !emojiContainer.contains(event.target)) {
      isEmojiShow.value = false
    }
  })
})
/* 发布评论 */
const doPost = async () => {
  const articleList = JSON.parse(decodeURI(route.query.params))
  console.log(inputContent.value, '发布评论')
  const token = localStorage.getItem('token')
  const res = await addCommentApi({
    token,
    comment_info: inputContent.value,
    article_id: articleList.article_id
  })
  const { data } = res.data
  console.log(data, 'data')
}
const subRichTextInputRef = ref(null)
/* 点击emoji方法 */
const onEmojiClick = (i) => {
  console.log(i, 'emoji')
  // const emoji = `<img class="emoji-item" src="https://cdn.sunofbeaches.com/emoji/${i}.png" />`
  let targetUrl = `https://cdn.sunofbeaches.com/emoji/${i}.png`
  /* 如果输入框没焦点 就要自动获取焦点 */
  let inputBox = RichTextInputRef.value
  if (document.activeElement !== inputBox) {
    inputBox.inputBoxRef.focus()
  }

  const selection = window.getSelection()
  const range = selection.getRangeAt(0)
  range.deleteContents()
  const node = document.createElement('img')
  node.src = targetUrl
  node.style.width = '16px'
  node.style.height = '16px'
  range.insertNode(node)
  range.collapse()
  selection.removeAllRanges()
  selection.addRange(range)
}

// const appendEmoji2 = (i) => {
//   // let targetUrl = `https://cdn.sunofbeaches.com/emoji/${i}.png`
//   /* 将emoji插入到光标位置 */
//   // let imgTag = document.createElement('img')
//   // imgTag.src = targetUrl
//   // imgTag.width = 16
//   // imgTag.height = 16
//   // const inputBox = document.querySelector('.richtext')
//   // inputBox.append(imgTag)
// }
</script>

<style lang="scss" scoped>
.child {
  position: relative;
  .emoji-container {
    position: absolute;
    z-index: 1;
  }
}
.no-comment {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: #999;
  padding: 20px;
}
.cancel-comment {
  color: #1e80ff;
  font-size: 14px;
  cursor: pointer;
}
.iconfont {
  font-family: 'iconfont' !important;
  font-style: normal;
  font-size: inherit;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.j-comment {
  text-align: left;
  width: 100%;
  padding: 1rem;
  #v-emoji-picker {
    position: absolute;
  }
  .j-comment-content {
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem;
    border: 1px solid;
  }
  .j-comment-content-btns {
    display: flex;
    button {
      margin-left: auto;
      background-color: #1e80ff;
      border: none;
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 8%;
      cursor: pointer;
    }
  }
  .j-comment-title {
    font-weight: bolder;
    font-size: large;
    margin: 1rem 0;
  }
  .j-comment-item {
    .j-comment-header {
      display: flex;
      line-height: 40px;
      flex-wrap: wrap;
      .j-comment-header-pre {
        display: flex;
        line-height: 40px;
        .j-comment-header-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .j-comment-header-nickname {
          padding-left: 1em;
        }
      }
      .j-comment-header-reply-nickname {
        span {
          margin-left: 0.5rem;
          margin-right: 0.5rem;
        }
      }
      .j-comment-header-time {
        margin-left: auto;
      }
    }
    .j-comment-body {
      padding: 0.5rem;
      padding-left: calc(40px + 1em);
    }
    .j-comment-footer {
      padding: 0.5rem 0rem;
      padding-left: calc(40px + 1em);
      display: flex;
      align-items: center;
      .j-comment-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      span {
        cursor: pointer;
      }
      .upitem {
        font-size: 14px;
        color: #8a919f;
      }
    }
    .j-comment-reply-content {
      // width: calc(100% - 40px - 1em - 1rem);
      min-height: 1rem;
      margin: 0.5rem 0rem;
      padding: 0.5rem;
      // margin-left: calc(40px + 1em);
      overflow: hidden;
      &::before {
        content: attr(placeholder);
        position: absolute;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #8a919f;
      }
    }
    .j-comment-reply-btns {
      position: relative;
      display: flex;
      .emoji-btn {
        margin-left: calc(40px + 1em);
      }
      button {
        margin-left: auto;
        background-color: #1e80ff;
        border: none;
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 8%;
        cursor: pointer;
      }
    }
    .j-comment-childer {
      padding: 0.5rem;
      margin-left: calc(40px + 1em);
      padding-left: 1em;
      background-color: #f9fafb;
      .j-coment-children-content {
        background-color: #f2f3f5;
        padding: 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid #e4e6eb;
        font-size: 14px;
        color: #8a919f;
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
      }
    }
  }
  .j-comment-childer-more {
    cursor: pointer;
  }
}

.parent {
  display: flex;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .child {
    flex: 1;
  }
}

.input-action-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-top: 15px;
}
.acition-emoji {
  display: flex;
  align-items: center;
  .emoji-trigger {
    margin-right: 15px;
    cursor: pointer;
    i {
      font-size: 16px;
    }
    #imgbox {
      width: 0;
    }
    .uploadimg-box {
      cursor: pointer;
    }
  }
}
.acition-btn {
  display: flex;
  align-items: center;
  .content-toggle {
    margin-right: 15px;
    font-size: 16px;
    color: #ccc;
  }
  .content-post-btn {
    background-color: #abcdff;
    width: 100px;
    text-align: center;
    font-size: 14px;
    // background: #1e80ff;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    border: 0;
    cursor: pointer;
    &.active {
      background-color: $jjColor;
    }
  }
}
/* 评论列表样式 */
.comment-list {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
  .comment-item {
    display: flex;
    margin-bottom: 10px;
    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .comment-content {
      flex: 1;
      padding-left: 10px;
      .comment-user {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .comment-content-text {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .comment-content-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
